<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div class="taskItemList_box">
    <div class="taskItemList_title">
      <div class="taskItemList_title_return" @click="ReturnsHistory">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <span>任务中心{{ title }}</span>
      </div>
      <p>全部意见</p>
    </div>
    <scroll class="taskItem_scroll">
      <div class="taskItem_item_content_top"></div>
      <div class="taskItem_item_content_workflow_item_box">
        <div
          class="taskItem_item_content_workflow_item"
          v-for="item in workflowData"
        >
          <div class="workflow_item_left ">
            <i class=""></i>
          </div>
          <div class="workflow_item_right">
            <div class="workflow_item_right_title">
              <span v-if="item.result == 'DISAGREE'">驳回</span>
              <span v-if="item.result == 'SUBMIT'">提交</span>
              <span v-if="item.result == 'MEETING'">安排上会</span>
              <span v-if="item.result == 'RATIFY'">批准</span>
              <span v-if="item.result == 'AGREEPOST'">否决</span>
              <span v-if="item.result == 'AGREE'">同意</span>
              <span v-if="item.result == 'DISAGREEPOST'">不同意后置</span>
              <i>{{ item.approvalTs | dateFormat("yyyy/MM/dd hh:mm:ss") }}</i>
            </div>
            <div class="workflow_item_right_content">
              <div class="workflow_item_right_content_item">
                <p>提交人</p>
                <span>{{ item.senderName }}</span>
              </div>
              <div class="workflow_item_right_content_item">
                <p>岗位</p>
                <span>{{ item.taskName }}</span>
              </div>
              <div class="workflow_item_right_content_item">
                <p>审批状态</p>
                <span v-if="item.result == 'DISAGREE'">驳回</span>
                <span v-if="item.result == 'SUBMIT'">提交</span>
                <span v-if="item.result == 'MEETING'">安排上会</span>
                <span v-if="item.result == 'RATIFY'">批准</span>
                <span v-if="item.result == 'AGREEPOST'">否决</span>
                <span v-if="item.result == 'AGREE'">同意</span>
                <span v-if="item.result == 'DISAGREEPOST'">不同意后置</span>
              </div>
              <div class="workflow_item_right_content_item">
                <p>处理人</p>
                <span>{{ item.approverName }}</span>
              </div>
              <div class="workflow_item_right_content_opinion">
                <em>审批意见</em>
                <span>{{ item.opinionText }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="taskItem_item_content_buttom"></div>
    </scroll>
  </div>
</template>

<script>
import Scroll from "@/pages/mobile/assets/js/JoysScroll/JoysScroll";
export default {
  name: "TaskItemList",
  components: {
    Scroll,
  },
  props: ["workflowData"],
  methods: {
    ReturnsHistory () {
      this.$emit('workflowChild')
    }
  },
}
</script>

<style lang='less' scoped>
.taskItemList_box {
  background: #fbf9fe;
  position: fixed;
  top: 0rem;
  bottom: 0.1rem;
  width: 100%;
  height: 100%;
  z-index: 800;
  .taskItemList_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    z-index: 501;
    position: fixed;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .taskItemList_title_return {
      float: left;
      height: 0.44rem;
      line-height: 0.44rem;
      img {
        // width: 0.15rem;
        float: left;
        height: 0.205rem;
        padding-left: 0.085rem;
        vertical-align: baseline;
        margin-top: 0.12rem;
      }
      span {
        float: left;
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        margin-left: 0.04rem;
        overflow: hidden;
        height: 0.44rem;
      }
    }
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 1.1rem;
      margin-right: 1.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .taskItem_scroll {
    height: 100%;
    margin-top: 0.44rem;
    .taskItem_item_content_workflow_item_box {
      background: #ffffff;
      border-radius: 4px;
      margin: 0 0.16rem;
      // margin-top: 0.1rem;
      padding: 0.1rem 0;
      .taskItem_item_content_workflow_item {
        display: flex;
        align-items: center;
        margin: 0 0.12rem;
        position: relative;
        .workflow_item_left {
          margin-left: 0.04rem;
          margin-right: 0.13rem;
          overflow: hidden;
          position: absolute;
          height: 100%;
          width: 0.18rem;
          i {
            display: block;
            width: 0.18rem;
            height: 0.18rem;
            background: #f15a4a;
            border-radius: 50%;
            border: 0px;
          }
          .workflow_item_left_circle {
            display: block;
            width: 0.08rem;
            height: 0.08rem;
            background: #fff;
            border: 0.05rem solid #f15a4a;
            border-radius: 50%;
          }
        }
        .workflow_item_left::after {
          content: "";
          background: #f15a4a;
          width: 0.05rem;
          display: block;
          margin-left: 0.07rem;
          height: 100%;
        }
        .workflow_item_left_no:after {
          background: linear-gradient(#f15a4a 48px, #E9E9E9; 1px, #E9E9E9;);
        }
        .workflow_item_right {
          float: left;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 4px;
          margin-bottom: 0.17rem;
          margin-left: 0.35rem;
          .workflow_item_right_title {
            padding: 0 0.12rem;
            background: #fbfbfb;
            border-radius: 4px 4px 0px 0px;
            height: 0.34rem;
            line-height: 0.34rem;
            display: flex;
            align-items: center;
            span {
              margin-right: 0.13rem;
              font-family: PingFangSC-Regular;
              font-size: 0.17rem;
              color: #263939;
              letter-spacing: 0;
              font-weight: 700;
            }
            i {
              font-family: PingFangSC-Regular;
              font-size: 0.13rem;
              color: #818181;
              letter-spacing: 0;
            }
          }
          .workflow_item_right_content {
            padding: 0 0.12rem;
            .workflow_item_right_content_item {
              width: 49%;
              float: left;
              box-sizing: border-box;
              margin-top: 0.06rem;
              p {
                height: 0.28rem;
                line-height: 0.28rem;
                display: block;
                font-family: PingFangSC-Regular;
                font-size: 0.12rem;
                color: rgba(62, 62, 62, 0.65);
                letter-spacing: -0.29px;
              }
              span {
                display: block;
                font-family: PingFangSC-Regular;
                font-size: 0.16rem;
                color: rgba(0, 22, 22, 0.85);
                letter-spacing: -0.38px;
                font-weight: 700;
              }
            }
            .workflow_item_right_content_opinion {
              float: left;
              em {
                height: 0.28rem;
                line-height: 0.28rem;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: rgba(62, 62, 62, 0.65);
                letter-spacing: -0.29px;
              }
              span {
                display: block;
                font-family: PingFangSC-Regular;
                font-size: 0.16rem;
                color: rgba(0, 22, 22, 0.85);
                letter-spacing: -0.38px;
                margin-bottom: 0.13rem;
              }
            }
          }
        }
        .workflow_item_right_more {
          float: left;
          background: #ffffff;
          border-radius: 4px;
          margin-bottom: 0.17rem;
          margin-left: 0.35rem;
          height: 103px;
          button {
            display: block;
            height: 0.38rem;
            line-height: 0.38rem;
            padding: 0 0.12rem;
            box-shadow: 0 0 4px 0 #f15a4a;
            border-radius: 2px;
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #f15a4a;
            letter-spacing: -0.38px;
            background: #fff;
          }
        }
        .workflow_item_right_top {
          float: left;
          background: #ffffff;
          border-radius: 4px;
          margin-bottom: 0.17rem;
          margin-left: 0.35rem;
          height: 0px;
        }
      }
      .taskItem_item_content_workflow_item:last-child {
        .workflow_item_right {
          margin-bottom: 0px;
        }
      }
    }
    .taskItem_item_content_top {
      display: block;
      height: 0.1rem;
      width: 100%;
    }
    .taskItem_item_content_buttom {
      display: block;
      height: 0.55rem;
      width: 100%;
      // background: red;
    }
  }
}
</style>
